<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="mycharts" style="width: 1000px; height: 500px;"></div>
</body>
<script src="echarts.js"></script>
<script src="./essos.js"></script>
<script>
    let mycharts = document.querySelector('#mycharts')
    let context = echarts.init(mycharts,'essos')

    let option = {
        title: {
            text: '多功能'
        },
        tooltip: {},  //鼠标滑过 显示标题
        dataset: {
            source: [
                ['鹤壁',200,260,'儿童',100],
                ['淇县',300,350,'青年',20],
                ['郑州',400,100,'成年',150],
                ['浚县',500,550,'老年',200],
                ['建业',180,280],
            ]
        },
        legend: {
            data: ['销量', '增加', '年龄段'],
        },
        xAxis: {
            // data: ['鹤壁', '淇县', '郑州', '浚县', '建业']
        },
        yAxis: {},
        series: [{
                name: '销量',
                type: 'bar',   //类型
                // data: [200, 300, 400, 500, 180]
            },
            {
                name: '用户增长',
                type: 'line',
                // data: [260, 350, 100, 550, 280]
            },
            {
                name: '年龄段',
                type: 'pie',
                center: ['80%',60],
                radius: '20%',
                // data: [
                //     {
                //         name:'儿童',
                //         value: 100
                //     },
                //     {
                //         name:'青年',
                //         value: 20
                //     },
                //     {
                //         name:'成年',
                //         value: 150
                //     },
                //     {
                //         name:'老年',
                //         value: 200
                //     },
                // ]
            }
        ]
    }

    // 渲染图表
    context.setOption(option)
</script>

</html>